<script lang="ts" setup>
import { onMounted, ref, onBeforeMount } from "vue";

import { Search } from "@element-plus/icons-vue";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
];
const input2 = ref("");
const currentPage2 = ref(5);
const pageSize2 = ref(100);
const size = ref(10);
const areaList = ref([
  "郑州",
  "新乡",
  "安阳",
  "郑州",
  "新乡",
  "安阳",
  "郑州",
  "新乡",
  "安阳",
]);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const active = ref("0");
const changeAct = (val: any) => {
  active.value = val;
};
const testAct = ref("0");
const changeTest = (val: any) => {
  testAct.value = val;
};
</script>
<template>
  <div class="container1 containers">
    <div class="contentbox">
      <el-descriptions
        class="margin-top"
        title=""
        :column="1"
        label-width="140"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">区域</div>
          </template>
          <ul class="selection" style="display: flex">
            <li v-for="(i, n) in areaList" style="margin-right: 12px">
              {{ i }}
            </li>
          </ul>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医院等级</div>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <div class="searchHeader">
        <el-input
          style="width: 300px"
          v-model="input2"
          class="input"
          placeholder="请输入试验名称、申办者、要求搜索"
        >
          <template #suffix>
            <el-icon style="color: #0c9397">
              <Search />
            </el-icon>
          </template>
        </el-input>
        研究者数目：3102
      </div>
      <el-table
        class="testTable"
        :data="tableData"
        align="left"
        header-row-class-name="headerName"
        :border="false"
        style="width: 100%"
      >
        <el-table-column prop="date" label="研究中心" width="400">
          <template #default="scope">
            <router-link to="/HospitalCenter">
            <div class="hospitalInfo">
             
                <img src="" alt="" />
                <div>
                  <p>河南省肿瘤医院</p>
                  <span>河南省 郑州市</span>
                </div>
                <ul>
                  <li class="tag">三甲</li>
                </ul>
             
            </div>
          </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="优势">
          <template #default="scope">
            <p style="color: #0c9397">试验分类:药代动力学/药效动力学试验</p>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="状态" width="180">
          <template #default="scope">
            <!-- <el-button size="mini" style="color: #0C9397;" link> 合作咨询 </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage2"
          v-model:page-size="pageSize2"
          :page-sizes="[10, 200, 300, 400]"
          :size="size"
          :background="true"
          layout="prev, pager, next,sizes,"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.containers {
  // background-color: #fff;
  height: calc(100% - 40px);
  margin: 20px auto;
}

button {
  width: 120px;
  height: 36px;
  background-color: #f5f5f5;
  font-size: 16px;
  margin-right: 11px;
  cursor: pointer;
  color: #333333;
}

.on {
  background-color: #0c9397;
  color: #fff;
}

.searchHeader {
  display: flex;
  margin: 20px 0;
  align-items: center;
  justify-content: space-between;
  .input {
    margin-right: 13px;
  }
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.contentbox {
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
}
.hospitalInfo {
  line-height: 1;
  color: #888888;
  font-size: 16px;
  align-items: center;
  display: flex;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
  }
  p {
    color: #333;
    margin-bottom: 10px;
  }
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    li {
      width: 44px;
      height: 26px;
      background: #0c9397;
      border-radius: 3px;
      margin-right: 5px;
      color: #fff;
      text-align: center;
      line-height: 26px;
    }
  }
}
</style>